今天的課程是要學習eventListener的幾個參數及函式，分別是Capture、Propagation、Bubbling以及Once。這次練習也是十分簡單，就讓我們直接看範例吧！

下面的圖是今天的教材，他就是個巢狀的<div>，結構如下：

<div class="one">
    This is div 1
    <div class="two">
        This is div 2
      <div class="three">
          This is div 3
      </div>
    </div>
</div>

而如果我們對div元素做click事件的監聽，如下。若我們點擊最裡面的第三個div，得到的console結果會是：three→two→one。因為點擊最裡面的div其實也同時點擊他的父母(parent)還有他的阿公阿嬤(parent的parent)。

const divs = document.querySelectorAll('div');
divs.forEach(div => div.addEventListener('click', logText));
function logText(e) {
    console.log(this.classList.value);
}

那如果我們這時候在addEventListener裡面加capture參數，這時候console的結果就會變成one→two→three。因為capture就是讓監聽的順序變成由外到內。而預設從內到外的這種形式就是Bubbling。

div.addEventListener('click', logText, {
    capture: true
})

而如果將logText函式加一行e.stopPropagation()，顧名思義就是「停止傳播」，也就是不會往內或往外找其他元素。假如在Bubbling狀態下，consle結果就只會有一個，點到什麼就是什麼。若是capture狀態，就都只會是最外面的one。

function logText(e) {
    console.log(this.classList.value);
    e.stopPropagation();
}

最後介紹once，若加入參數once並設定為true，則效果等同於removeEventListener()，也就是當點擊一次觸發函式之後，就不再監聽click事件了。

div.addEventListener('click', logText, {
    capture: false,
    once: true
})